<template>
  <div class="qr">
    <van-nav-bar
      title="二维码登录"
      left-text="返回"
      left-arrow
      @click-left="add"
    >
    </van-nav-bar>
    <div class="qrs" v-loading="loading" element-loading-text="拼命加载中">
      <div>
        <img :src="img" alt="" @click="toload" />
        <p v-if="!loading">{{ text }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { key, qr, lx, hq } from "../api/login/login";
import { Toast } from "vant";

export default {
  data() {
    return {
      img: "",
      loading: true,
      time: "",
      text: "请打开网易云移动端扫一扫",
    };
  },
  created() {
    this.toload();
  },
  mounted() {},
  methods: {
    add() {
      this.$router.push("/login");
      clearInterval(this.time);
    },
    toload() {
      clearInterval(this.time);
      key().then((v) => {
        qr({ key: v.data.unikey, qrimg: true })
          .then((res) => {
            this.img = res.data.qrimg;
            this.loading = false;
          })
          .then((val) => {
            this.time = setInterval(() => {
              lx({ key: v.data.unikey }).then((n) => {
                if (n.code == 803) {
                  clearInterval(this.time);
                  this.$cookie.cookie("cookie", n.cookie);
                  hq({ cookie: n.cookie }).then((o) => {
                    window[this.$store.state._storageUrl].setItem(
                      "user",
                      JSON.stringify(o.data)
                    );
                  });
                  Toast.clear();
                  this.$router.push("/home/home2");
                } else if (n.code == 802) {
                  Toast.loading({
                    message: "待确认",
                    forbidClick: true,
                    duration: 0,
                  });
                } else if (n.code == 800) {
                  clearInterval(this.time);
                  this.text = "二维码已失效请点击二维码重新加载";
                }
              });
            }, 1500);
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.qr {
  height: 100%;
  .qrs {
    height: 100%;
    display: flex;
    justify-content: center;
  }
}
</style>